<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-[1024px] bg-gray-50">
    <!-- 固定导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
      <div class="max-w-[1440px] mx-auto h-16 flex items-center justify-between px-8">
        <div class="flex items-center space-x-2">
          <i class="fas fa-music text-2xl text-indigo-600"></i>
          <span class="text-xl font-bold">音乐乐谱库</span>
        </div>
        
        <div class="flex space-x-8">
          <button v-for="nav in navItems" :key="nav.name" 
            class="!rounded-button whitespace-nowrap text-gray-600 hover:text-indigo-600 px-4 py-2">
            {{ nav.name }}
          </button>
        </div>

        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" placeholder="搜索乐谱..." 
              class="pl-10 pr-4 py-2 w-64 rounded-full border-2 border-gray-200 focus:border-indigo-500 outline-none text-sm"/>
            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
          <button class="!rounded-button whitespace-nowrap">
            <i class="fas fa-user text-gray-600 text-xl"></i>
          </button>
        </div>
      </div>
    </nav>

    <!-- Hero Banner -->
    <div class="pt-16">
      <div class="relative h-[500px] overflow-hidden">
        <swiper
          :modules="swiperModules"
          :slides-per-view="1"
          :loop="true"
          :autoplay="{ delay: 5000 }"
          :pagination="{ clickable: true }"
        >
          <swiper-slide v-for="banner in banners" :key="banner.id">
            <div class="relative h-[500px]">
              <img :src="banner.image" class="w-full h-full object-cover" />
              <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
                <div class="max-w-[1440px] mx-auto px-8 h-full flex items-center">
                  <div class="text-white max-w-lg">
                    <h1 class="text-5xl font-bold mb-4">{{ banner.title }}</h1>
                    <p class="text-lg mb-8">{{ banner.description }}</p>
                    <button class="!rounded-button whitespace-nowrap bg-indigo-600 text-white px-8 py-3 text-lg hover:bg-indigo-700">
                      立即查看
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <!-- 分类展示 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16">
      <h2 class="text-3xl font-bold mb-12 text-center">热门分类</h2>
      <div class="grid grid-cols-5 gap-8">
        <div v-for="category in categories" :key="category.name" 
          class="group rounded-xl bg-white shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
          <div class="h-48 overflow-hidden">
            <img :src="category.image" class="w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">{{ category.name }}</h3>
            <p class="text-gray-600">{{ category.count }}份乐谱</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新乐谱 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16 bg-white">
      <h2 class="text-3xl font-bold mb-12 text-center">最新乐谱</h2>
      <swiper
        :modules="swiperModules"
        :slides-per-view="4"
        :space-between="30"
        :loop="true"
        :autoplay="{ delay: 3000 }"
      >
        <swiper-slide v-for="score in latestScores" :key="score.id">
          <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="h-48 overflow-hidden">
              <img :src="score.image" class="w-full h-full object-cover" />
            </div>
            <div class="p-4">
              <h3 class="font-bold mb-2">{{ score.title }}</h3>
              <p class="text-sm text-gray-600 mb-2">{{ score.artist }}</p>
              <div class="flex items-center justify-between">
                <span class="px-2 py-1 bg-indigo-100 text-indigo-600 rounded text-sm">{{ score.level }}</span>
                <span class="text-sm text-gray-500">
                  <i class="fas fa-heart text-red-500"></i> {{ score.likes }}
                </span>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 底部功能区 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16 grid grid-cols-2 gap-8">
      <div>
        <h3 class="text-xl font-bold mb-6">热门标签</h3>
        <div class="flex flex-wrap gap-2">
          <button v-for="tag in tags" :key="tag" 
            class="!rounded-button whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-indigo-100 text-sm">
            {{ tag }}
          </button>
        </div>
      </div>
      <div>
        <h3 class="text-xl font-bold mb-6">最近浏览</h3>
        <div class="space-y-4">
          <div v-for="history in browsingHistory" :key="history.id" 
            class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow">
            <img :src="history.image" class="w-16 h-16 object-cover rounded" />
            <div>
              <h4 class="font-bold">{{ history.title }}</h4>
              <p class="text-sm text-gray-600">{{ history.artist }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white">
      <div class="max-w-[1440px] mx-auto px-8 py-16">
        <div class="grid grid-cols-4 gap-8">
          <div>
            <h4 class="text-xl font-bold mb-4">关于我们</h4>
            <p class="text-gray-400">音乐乐谱库致力于为音乐爱好者提供优质的乐谱资源，让每个人都能享受音乐的美好。</p>
          </div>
          <div>
            <h4 class="text-xl font-bold mb-4">联系方式</h4>
            <div class="space-y-2 text-gray-400">
              <p><i class="fas fa-envelope mr-2"></i> contact@musicsheet.com</p>
              <p><i class="fas fa-phone mr-2"></i> 400-123-4567</p>
            </div>
          </div>
          <div>
            <h4 class="text-xl font-bold mb-4">关注我们</h4>
            <div class="flex space-x-4">
              <i class="fab fa-weixin text-2xl text-gray-400 hover:text-white cursor-pointer"></i>
              <i class="fab fa-weibo text-2xl text-gray-400 hover:text-white cursor-pointer"></i>
              <i class="fab fa-qq text-2xl text-gray-400 hover:text-white cursor-pointer"></i>
            </div>
          </div>
          <div>
            <h4 class="text-xl font-bold mb-4">友情链接</h4>
            <div class="space-y-2 text-gray-400">
              <p>音乐教育网</p>
              <p>乐器商城</p>
              <p>音乐资讯</p>
            </div>
          </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
          <p>© 2024 音乐乐谱库 版权所有</p>
        </div>
      </div>
    </footer>

    <!-- 返回顶部 -->
    <button @click="scrollToTop" v-show="showBackTop"
      class="!rounded-button whitespace-nowrap fixed right-8 bottom-8 w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700">
      <i class="fas fa-arrow-up"></i>
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from 'swiper/modules';

const swiperModules = [Pagination, Autoplay];
const showBackTop = ref(false);

const navItems = [
  { name: '乐队总谱' },
  { name: '吉他谱' },
  { name: '爵士鼓谱' },
  { name: '钢琴谱' },
  { name: '尤克里里谱' }
];

const banners = [
  {
    id: 1,
    title: '发现你的专属乐谱',
    description: '海量乐谱资源，让你的音乐梦想触手可及',
    image: 'https://ai-public.mastergo.com/ai/img_res/7663d8b947df4f129c4cfca7f5082390.jpg'
  },
  {
    id: 2,
    title: '专业乐谱教学',
    description: '从入门到精通，专业的乐谱指导',
    image: 'https://ai-public.mastergo.com/ai/img_res/540c43ba4138c265811e7cb1fd44e0d5.jpg'
  }
];

const categories = [
  {
    name: '乐队总谱',
    count: 2345,
    image: 'https://ai-public.mastergo.com/ai/img_res/427a7197c53bccc31772c6886cbeb9e6.jpg'
  },
  {
    name: '吉他谱',
    count: 5678,
    image: 'https://ai-public.mastergo.com/ai/img_res/be5c586d3ceef31e6a718e147ad01bcd.jpg'
  },
  {
    name: '爵士鼓谱',
    count: 1234,
    image: 'https://ai-public.mastergo.com/ai/img_res/26cc513fc4d52befaf42772f372074b5.jpg'
  },
  {
    name: '钢琴谱',
    count: 4567,
    image: 'https://ai-public.mastergo.com/ai/img_res/44999717cff0cea729fd362246cd99a3.jpg'
  },
  {
    name: '尤克里里谱',
    count: 890,
    image: 'https://ai-public.mastergo.com/ai/img_res/16a183fac8b4c84d2a4552ad7573eb76.jpg'
  }
];

const latestScores = [
  {
    id: 1,
    title: '月光奏鸣曲',
    artist: '贝多芬',
    level: '高级',
    likes: 2890,
    image: 'https://ai-public.mastergo.com/ai/img_res/7fd0a8216d00ae9bf09db00cc4bedac3.jpg'
  },
  {
    id: 2,
    title: '春江花月夜',
    artist: '李云迪改编',
    level: '中级',
    likes: 1567,
    image: 'https://ai-public.mastergo.com/ai/img_res/5ba7f2cf3ae4989c96e11da4060d7bd8.jpg'
  },
  {
    id: 3,
    title: '卡农',
    artist: '帕赫贝尔',
    level: '中级',
    likes: 3456,
    image: 'https://ai-public.mastergo.com/ai/img_res/a68f3a2cc4756600a9286711e7e14b13.jpg'
  },
  {
    id: 4,
    title: '梦中的婚礼',
    artist: '理查德克莱德曼',
    level: '初级',
    likes: 2345,
    image: 'https://ai-public.mastergo.com/ai/img_res/59284cc111ff18312e0f405378f81871.jpg'
  },
  {
    id: 5,
    title: '致爱丽丝',
    artist: '贝多芬',
    level: '初级',
    likes: 4567,
    image: 'https://ai-public.mastergo.com/ai/img_res/36f84e72ac3808dfd4aa2ae20d0eca6b.jpg'
  }
];

const tags = [
  '古典音乐', '流行歌曲', '民谣', '爵士', '蓝调',
  '摇滚', '电子音乐', '世界音乐', '独奏曲', '协奏曲'
];

const browsingHistory = [
  {
    id: 1,
    title: '梦中的婚礼',
    artist: '理查德克莱德曼',
    image: 'https://ai-public.mastergo.com/ai/img_res/2737980d63bbf482c8972912b0183ede.jpg'
  },
  {
    id: 2,
    title: '卡农',
    artist: '帕赫贝尔',
    image: 'https://ai-public.mastergo.com/ai/img_res/c2c4ac6b76e70a87e5cb68fbb0c195c9.jpg'
  }
];

const handleScroll = () => {
  showBackTop.value = window.scrollY > 300;
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.swiper-pagination-bullet {
  background: white;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}
</style>

